<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    /*
     * DOM Level 0 : 스펙 없음 - 브라우저마다 구현 방식이 다름(하지만 다들 비슷 출발은 MS에서 개발)
     * DOM Level 1 : 정식 스펙
     *  - inline 방식 : 완전히 지양히야할 방식 (유지보수에 최악, css역시 inline으로 하면 문제가 발생)
     *  - property 방식 : assign 방식으로 하나의 이벤트만 연결된다.
     *                   삭제 하려면 window.onload = null 과 같이 처리
     * DOM Level 2 : 정식 스펙(표준 스펙)
     *  - method 기반
     *             addEventListener
     *             removeEventListener
     * DOM Level 3 : 진행 중
     */
    
    // window가 가지고 있는 onload라는 property 사용
    window.onload = function(){
        alert("window loading done.. - 하나의 이벤트만 처리할 수 있다.");
    };
    window.addEventListener("load", fn);
    window.addEventListener("load", fn1);
    window.addEventListener("load", fn);
    function fn(){
        alert("fn method");
    }
    function fn1(){
        alert("fn1 method");
    }
</script>
</head>
<body>
    <button onclick="alert('inline 방식')">click me</button>
    
    <button id="btn2"></button>
</body>
</html>